<template>
  <n-layout class="h100vh" position="absolute" id="layout-app">
    <n-layout-header bordered position="absolute">
      <slot name="header" />
    </n-layout-header>
    <n-layout-content position="static">
      <slot name="content" />
    </n-layout-content>
    <n-layout-footer position="static">
      <slot name="footer" />
    </n-layout-footer>
  </n-layout>
</template>
<script setup lang="ts">
import {
  NLayoutContent,
  NLayoutHeader,
  NLayout,
  NLayoutFooter,
} from "naive-ui";
</script>
<style lang="scss" scoped>
.n-layout {
  .n-layout-header {
    top: 0px;
    height: 80px;
    background: #fff;
    z-index: 2000;
  }
  .n-layout-footer {
    background: #232323;
  }
  .n-layout-content {
    margin-top: 80px;
    padding-bottom: 20px;
    background: #f5f7f9;
    min-height: calc(100vh - 183px);
    flex-grow: 1;
    // 隐藏滚动条样式
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    ::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }
  }
}
</style>
